<template>
	<view class="shop-cart" :class="['qn-page-' + theme]">
		<Aempty text="购物车没有商品哦～～" src="../../static/empty/car.png" v-if="!cart_list.length && !invalid_list.length"></Aempty>
		<view class="cart-ul">
			<u-swipe-action
				bg-color="transparent"
				v-for="(item, index) in cart_list"
				:key="index"
				:index="index"
				:show="item.show"
				btn-width="120"
				:options="options"
				@open="swipeOpen"
				@click="swipeClick"
			>
				<view class="cart-item">
					<view class="cli-top clearfix" @tap="goPage('/pages/goods/GoodsDetail?id=' + item.goodsId)">
						<view class="float_left sel-view" @click.stop="selectionCart(1, item.selection, item.cartId, item)">
							<text class="ibonfont" :class="[item.selection === 5 ? 'ibonxuanze' : 'ibonweixuanze']"></text>
						</view>
						<view class="float_left goods-img"><u-image border-radius="8rpx" width="100rpx" height="100rpx" :src="item.images"></u-image></view>
						<view class="float_left goods-info">
							<view class="goods-name ellipsis">
								<view class="activity-tag" v-if="item.activityId"><text class="ibonfont ibonshangxiangxianshimiaosha"></text></view>
								{{ item.title }}
							</view>
							<view class="goods-spec">
								<text v-for="(itemS, indexS) in item.specGroup" :key="indexS">{{ itemS.specValueName }};</text>
							</view>
						</view>
					</view>
					<view class="cli-bto clearfix">
						<view class="float_left">
							<view class="now-price" v-if="item.activityId">
								<text class="rmb-icon">¥</text>
								{{ item.activityPrice }}
							</view>
							<view class="now-price" v-else>
								<text class="rmb-icon">¥</text>
								{{ item.salePrice }}
							</view>
						</view>
						<view class="float_right">
							<u-number-box
								:min="1"
								:max="item.activityId ? item.activity.limitNum : item.inventory"
								v-model="item.buyNum"
								:input-height="44"
								@plus="valPlus($event, item)"
								@minus="valMinus($event, item)"
								:disabled-input="true"
							></u-number-box>
						</view>
					</view>
				</view>
			</u-swipe-action>
		</view>
		<view class="cart-ul invalid-ul" v-if="invalid_list.length">
			<view class="invalid-title clearfix">
				<view class="invalid-text float_left">失效商品</view>
				<view class="clear-iv-btn float_right" @click="clearInvalidGoods">清空失效商品</view>
			</view>
			<block v-for="(item, index) in invalid_list" :key="index">
				<view class="cart-item">
					<view class="cli-top clearfix">
						<view class="float_left sel-view"><text>失效</text></view>
						<view class="float_left goods-img"><u-image border-radius="8rpx" width="100rpx" height="100rpx" :src="item.images"></u-image></view>
						<view class="float_left goods-info">
							<view class="goods-name ellipsis">{{ item.title }}</view>
						</view>
					</view>
				</view>
			</block>
		</view>
		<view class="add-view clearfix" v-if="cart_list.length">
			<view class="float_left sel-view" @click="selectionCart(3, selection)">
				<text class="ibonfont" :class="[selection === 5 ? 'ibonxuanze' : 'ibonweixuanze']"></text>
				<text>全选</text>
			</view>
			<view class="float_left all-del" @click="manageCart">{{ is_del ? '完成' : '管理' }}</view>
			<block v-if="!is_del">
				<view class="float_right pay-btn primary-btn" @click="goPage('/pages/order/createOrder')">立即结算</view>
				<view class="float_right">
					<text>合计</text>
					<text class="total-price">¥{{ pay_money }}</text>
				</view>
			</block>
			<block v-else>
				<view class="float_right del-btn primary-btn-pain" @click="allDelete">删除</view>
				<view class="float_right del-btn clear-btn" @click="clearCart">
					<text class="ibonfont ibonshandian1"></text>
					清空
				</view>
			</block>
		</view>
		<view class="cart_like" v-if="!cart_list.length">
				<view style="text-align: center;margin-bottom: 32upx;"><text>- 猜你喜欢 -</text></view>
				<view><GoodsItem></GoodsItem></view>
		</view>
		<!-- 底部Tabbar -->
		<Tabbar v-model="current"></Tabbar>
	</view>
</template>

<script>
	import {GoodsItem} from '@/components/GoodsItem.vue'
export default {
	components:{
		GoodsItem
	},
	data() {
		return {
			is_del: false,
			current: 2,
			selection: 4,
			num: 1,
			cart_list: [],
			invalid_list: [], //失效商品
			pay_money: 0,
			options: [
				{
					text: '删除',
					style: {
						backgroundColor: '#f63435'
					}
				}
			]
		};
	},
	onLoad() {
		// #ifdef MP-WEIXIN
		// 小程序的原生菜单中显示分享按钮
		uni.showShareMenu({
			withShareTicket: false,
			menus: ['shareAppMessage', 'shareTimeline']
		});
		// #endif
	},
	onShow() {
		if (this.$store.state.hasLogin) {
			this.getCart();
		}
	},
	// #ifdef MP-WEIXIN
	// 分享到朋友圈
	onShareTimeline(obj) {},
	// 收藏小程序
	onAddToFavorites() {},
	// #endif
	onPullDownRefresh() {
		this.getCart();
	},
	methods: {
		// 清空失效商品
		clearInvalidGoods() {
			const cartIds = this.invalid_list.map(item => {
				return item.cartId;
			});
			this.$u.api
				.delCart({
					cartIds: cartIds
				})
				.then(res => {
					this.$u.toast('操作成功');
					this.getCart();
				});
		},
		// 清空购物车
		clearCart() {
			uni.showModal({
				title: '',
				content: `确定要清空购物车吗？`,
				cancelText: '我再想想',
				confirmText: '确定',
				success: res => {
					if (res.confirm) {
						this.$u.api.clearCart().then(res => {
							this.$u.toast('操作成功');
							this.getCart();
						});
					}
				}
			});
		},
		// 删除购物车
		allDelete() {
			const cartIds = this.cart_list.filter(item => item.selection === 5).map(item => item.cartId);
			if (!cartIds.length) {
				this.$u.toast('未选中商品');
				return;
			}
			uni.showModal({
				title: '',
				content: `确定要删除这${cartIds.length}个宝贝吗？`,
				cancelText: '我再想想',
				confirmText: '确定',
				success: res => {
					if (res.confirm) {
						this.$u.api
							.delCart({
								cartIds: cartIds
							})
							.then(res => {
								this.$u.toast('已删除');
								this.getCart();
							});
					}
				}
			});
		},
		manageCart() {
			this.is_del = !this.is_del;
		},
		//选中，取消
		selectionCart(type, selection, cartId, item) {
			const selectionT = selection === 5 ? 4 : 5;
			let cartIdT = '';
			if (!cartId) {
				cartId = this.cart_list.map(item => item.cartId).join(',');
			} else {
				cartIdT = cartId;
			}
			if (item) {
				item.selection = selectionT;
			} else {
				this.selection = selectionT;
			}
			this.selection = this.cart_list.every(item => item.selection === 5) ? 5 : 4;
			this.$u.api.selectionCart({ type: type, selection: selectionT, cartId: cartIdT }).then(res => {
				this.getCart();
			});
		},
		// 滑动删除
		swipeClick(index) {
			uni.showModal({
				title: '',
				content: '确定要删除这1个宝贝吗',
				cancelText: '我再想想',
				confirmText: '确定',
				success: res => {
					this.cart_list[index].show = false;
					if (res.confirm) {
						this.$u.api
							.delCart({
								cartIds: [this.cart_list[index].cartId]
							})
							.then(res => {
								this.$u.toast('已删除');
								this.getCart();
							});
					}
				}
			});
		},
		// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
		swipeOpen(index) {
			// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
			// 原本为'false'，再次设置为'false'会无效
			this.cart_list[index].show = true;
			this.cart_list.map((val, idx) => {
				if (index != idx) this.cart_list[idx].show = false;
			});
		},
		// 获取购物车数据
		getCart() {
			this.$u.api.getCart().then(({ data }) => {
				uni.stopPullDownRefresh();
				this.cart_list = (data.lists || []).map(item => {
					return {
						...item,
						show: false
					};
				});
				this.pay_money = data.payMoney || 0;
				this.invalid_list = data.invalid || [];
				this.selection = this.cart_list.every(item => item.selection === 5) ? 5 : 4;
			});
		},
		// 修改购买数量
		valPlus(e, row) {
			if (row.activityId) {
				this.pay_money = this.$utils.formatFloat(Number(this.pay_money) + Number(row.activityPrice), 2);
			} else {
				this.pay_money = this.$utils.formatFloat(Number(this.pay_money) + Number(row.salePrice), 2);
			}
			this.numCart(e.value, row.cartId);
		},
		valMinus(e, row) {
			if (row.activityId) {
				this.pay_money = this.$utils.formatFloat(this.pay_money - Number(row.activityPrice), 2);
			} else {
				this.pay_money = this.$utils.formatFloat(this.pay_money - Number(row.salePrice), 2);
			}
			this.numCart(e.value, row.cartId);
		},
		// valBlur(e, row) {
		// 	this.numCart(e.value, row.cartId);
		// },
		numCart(val, cartId) {
			this.$u.api
				.numCart({
					cartId: cartId,
					buyNum: val
				})
				.then(res => {
					this.getCart();
				});
		}
	}
};
</script>

<style lang="scss">
.shop-cart {
	margin-bottom: 120rpx;
}

.cart-ul {
	// padding: 22upx;
	width: 706rpx;
	margin: 20rpx auto;
	border-radius: 12upx;
	background-color: #ffffff;
	overflow: hidden;
	.cart-item {
		border-bottom: 1px solid #f7f8fa;
		padding: 26upx 30upx;
		.cli-bto {
			padding-left: 160upx;
			padding-right: 10upx;
			.now-price {
				color: $price-color;
				line-height: 44upx;
				// font-weight: bold;
				font-size: 32rpx;
				.rmb-icon {
					font-size: 24rpx;
					font-weight: 400;
				}
			}
			.u-number-input {
				background-color: #ffffff !important;
			}
			.u-icon-plus {
				border-radius: 8rpx !important;
				width: 44rpx !important;
				font-size: 24rpx;
			}
			.u-icon-disabled {
				border-radius: 8rpx !important;
				width: 44rpx !important;
				font-size: 24rpx;
			}
			.u-icon-minus {
				border-radius: 8rpx !important;
				width: 44rpx !important;
				font-size: 24rpx;
			}
		}
		.cli-top {
			.sel-view {
				line-height: 100upx;
				color: #f63435;
				.ibonweixuanze {
					color: #999999;
				}
			}
			.goods-info {
				width: 480upx;
				.goods-name {
					-webkit-line-clamp: 1;
					.activity-tag {
						color: #fff;
						display: inline-block;
						padding: 0 6upx;
						border-radius: 6rpx;
						background: linear-gradient(to right, #ff3859, #ff2d2e);
						.ibonfont {
							font-size: 22rpx;
						}
						margin-right: 10upx;
						line-height: 26rpx;
					}
				}
				.goods-spec {
					font-size: 24upx;
					padding-top: 6upx;
					color: #999999;
				}
			}
			.goods-img {
				margin: 0 16upx;
			}
		}
	}
}
.invalid-ul {
	.invalid-title {
		color: #999999;
		line-height: 80rpx;
		height: 80rpx;
		padding: 0 20rpx;
		.clear-iv-btn {
			font-size: 24rpx;
		}
	}
	.cart-item {
		.cli-top {
			.sel-view {
				color: #999999;
				font-size: 24rpx;
			}
			.goods-info {
				width: 454rpx;
				.goods-name {
					color: #999999;
				}
			}
		}
	}
}
.add-view {
	position: fixed;
	background-color: #ffffff;
	bottom: 100upx;
	width: 100%;
	left: 0;
	padding: 24upx;
	line-height: 70upx;
	border-top: 1px solid #e9e9eb;
	.all-del {
		padding-left: 20upx;
		font-size: 26upx;
		color: #999999;
	}
	.sel-view {
		font-size: 26upx;
		.ibonfont {
			margin-right: 10upx;
			font-size: 28upx;
			color: #f63435;
		}
		.ibonweixuanze {
			color: #999999;
		}
	}
	.total-price {
		color: #f63434;
		padding-left: 10upx;
		font-weight: bold;
		font-size: 32upx;
	}
	.pay-btn {
		color: #ffffff;
		background-color: #f63434;
		width: 206upx;
		// border: 1px solid transparent;
		text-align: center;
		border-radius: 10upx;
		margin-left: 30upx;
	}
	.del-btn {
		color: $price-color;
		border: 1px solid $price-color;
		width: 126upx;
		text-align: center;
		border-radius: 10rpx;
		line-height: 60rpx;
		margin: 4upx 0;
	}
	.clear-btn {
		color: $font-color-light;
		border: 0 none;
		margin-right: 20rpx;
		.ibonshandian1 {
			transform: translateY(4rpx);
			display: inline-block;
			margin-right: 10upx;
		}
	}
}
.cart_like{
	width: 100%;
	font-size: 32upx;
	font-weight: 500;
	margin-top: 60upx;
}
</style>
